<template>
  <div id="check">
    <div v-if="this.name=='admin'">
      <div class="dep_main" style="margin-top: 0">
        <div class="
        title">登记操作</div>
        <list-lable
          :listLable="listLableDj"
          :listLableTitle="listLableTitle"
          :windowNamme="'User'"
          :page="this.pageListDj.pageNum"
          @openChangeWindow="openChangeWindow"
          :height="tableHeight"
          @stone="stone"
        ></list-lable>
        <pagi-nation :page="this.pageListDj.pageNum" :total="total1" @changeList="changeListDj"></pagi-nation>

      </div>
      <div class="dep_main" style="height:50%">
        <div class="title">归档操作</div>
        <list-lable
          :listLable="listLableGd"
          :listLableTitle="listLableTitle"
          :windowNamme="'User'"
          :page="this.pageListGd.pageNum"
          @openChangeWindow="openChangeWindow"
          :height="tableHeight"
          @stone="stone"
        ></list-lable>
        <pagi-nation :page="this.pageListGd.pageNum" :total="total2" @changeList="changeList"></pagi-nation>
      </div>
    </div>
    <div v-else style="height:100%">
      <div v-if="this.name=='registrar'" style="height:100%">
        <div class="dep_main" style="height:100%">
          <div class="title">登记操作</div>
          <list-lable
            :listLable="listLableDj"
            :listLableTitle="listLableTitle"
            :windowNamme="'User'"
            :page="this.pageListDj.pageNum"
            @openChangeWindow="openChangeWindow"
            :height="tableHeight"
            @stone="stone"
          ></list-lable>
          <pagi-nation :page="this.pageListDj.pageNum" :total="total1" @changeList="changeListDj"></pagi-nation>
        </div>
      </div>
      <div v-else style="height:100%">
        <div class="dep_main" style="height:100%">
          <div class="title">归档操作</div>
          <list-lable
            :listLable="listLableGd"
            :listLableTitle="listLableTitle"
            :windowNamme="'User'"
            :page="this.pageListGd.pageNum"
            @openChangeWindow="openChangeWindow"
            :height="tableHeight"
            @stone="stone"
          ></list-lable>
          <pagi-nation :page="this.pageListGd.pageNum" :total="total2" @changeList="changeList"></pagi-nation>
        </div>
      </div>
    </div>

    <transition name="slide-fade">
      <div class="popContainer" v-if="changeShow" :class="this.name!=='admin'?'popContainer2':''">
        <change-window :openName="openName" ref="openChangeInfo"></change-window>
      </div>
    </transition>
  </div>
</template>
<script>
import { applyBusiListInfo, submitPassInfo } from '@/api/leave'
import listLable from '@/leavebackComponents/MyTable/MyTable' // 表格
import pagiNation from '@/leavebackComponents/PagiNation' // 分页器
import changeWindow from '@/leavebackComponents/ChangeWindow' // 详情弹窗
export default {
  name: 'Check',
  components: {
    listLable,
    pagiNation,
    submitPassInfo,
    changeWindow
  },
  data () {
    return {
      name: 'admin', // this.$store.state.userForm.roleName,
      changeShow: false,
      openName: '',
      total1: 0, // 登记总数
      total2: 0, // 归档总数
      pageListDj: {
        pageSize: 10,
        pageNum: 1,
        status: 6
      },
      pageListGd: {
        pageSize: 10,
        pageNum: 1,
        status: 7
      },
      listLableTitle: [
        {
          prop: 'num',
          label: '序号',
          width: 50
        },
        {
          prop: 'applicant',
          label: '员工姓名'
        },
        {
          prop: 'depName',
          label: '部门'
        },
        {
          prop: 'leaveType',
          label: '请假类型'
        },
        {
          prop: 'leaveDateNum',
          label: '请假时长(小时)'
        },
        {
          prop: 'startTime',
          label: '请假时间'
        },
        {
          label: 'action',
          list: [
            {
              label: '详情',
              width: 100
            },

            {
              label: '通过',
              width: 100
            }
          ]
        }
      ],
      listLableDj: [],
      listLableGd: [],
      tableHeight: null
    }
  },
  mounted () {
    switch (this.name) {
      case 'admin':
        this.funDj()
        this.funGd()
        break
      case 'registrar':
        this.funDj()
        break
      case 'archive':
        this.funGd()
        break
      default:
        return
    }
    window.addEventListener('resize', this.getHeight, false)
  },
  methods: {
    getHeight () {
      // 获取浏览器高度并计算得到表格所用高度。
      this.tableHeight = document.documentElement.clientHeight - 500
      if (this.name === 'admin') {
        this.changeHei()
      } else {
        this.changeHeiBig()
      }
    },
    changeHeiBig () {
      if (this.tableHeight < 400) {
        this.tableHeight = 400
      }
    },
    changeHei () {
      if (this.tableHeight < 200) {
        this.tableHeight = 200
      }
      if (this.tableHeight > 350) {
        this.tableHeight = 350
      }
    },
    async funDj () {
      // 登记查询
      const msgDj = await applyBusiListInfo(this.pageListDj)
      if (msgDj.code === 0) {
        this.listLableDj = msgDj.data.list
        this.total1 = msgDj.data.total
        this.getHeight()
      }
    },
    async funGd () {
      // 归档查询
      const msgDj = await applyBusiListInfo(this.pageListGd)
      if (msgDj.code === 0) {
        this.listLableGd = msgDj.data.list
        this.total2 = msgDj.data.total
        this.getHeight()
      }
    },
    stone (value) {
      // 通过登记
      this.$confirm('是否通过此申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.res(value)
        })
        .catch(() => {})
    },
    async res (value) {
      const streatMsg = await submitPassInfo(parseInt(value))
      if (streatMsg.code === 0) {
        this.$message({
          type: 'success',
          message: streatMsg.msg
        })
        this.closeOpen()
        this.pageListDj.pageNum = 1
        this.pageListGd.pageNum = 1
        this.funDj()
        this.funGd()
      }
    },
    changeListDj (val) {
      // 翻页
      if (this.name === 'admin') {
        this.pageListDj.pageNum = val
        this.pageListGd.pageNum = 1
        this.funDj()
        this.funGd()
      } else {
        this.pageListDj.pageNum = val
        this.funDj()
      }
    },
    openChangeWindow (value) {
      // 详情信息弹窗
      this.openName = 'check'
      this.changeShow = true
      this.$nextTick(() => {
        this.$refs.openChangeInfo.changeInfo(value)
      })
    },
    closeOpen () {
      this.changeShow = false
    },
    changeList (val) {
      // 翻页
      // this.pageList.pageNum = val
      this.pageListGd.pageNum = val
      this.funGd()
    }
  }
}
</script>
<style scoped>
.dep_main {
  height: 270px;
}
.popContainer {
  position: absolute;
  display: flex;
  min-width: 700px;
  height: 100%;
  top: 0;
  left: 180px;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(16, 16, 16, 0.2);
}
.popContainer2 {
  height: 606px;
}
</style>
